<template>
	<el-dialog
		:visible="visible"
		width="1300px"
		:lock-scroll="false"
		:modal-append-to-body="false"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		:modal="false"
		class="v-modal"
		center
	>
		<div slot="title" class="dialog-title">
			账单详情
		</div>
		<div v-loading="loading" element-loading-spinner="el-icon-loading">
			<div class="date-title">
				账期时间
				{{ currentBillDetail.reportStDateStr }}
				-
				{{ currentBillDetail.reportEdDateStr }}
			</div>
			<div class="bill-detail-content">
				<MemberBillDetail
					v-if="detailData.acctType === 99"
					:currentBillDetail="currentBillDetail"
					:lastBillDetail="lastBillDetail"
					:key="detailKey * 10"
				></MemberBillDetail>
				<ProxyBillDetail
					v-else
					:currentBillDetail="currentBillDetail"
					:lastBillDetail="lastBillDetail"
					:key="detailKey * 20"
				></ProxyBillDetail>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="handleClose">
				{{ $t('member.close') }}
			</el-button>
		</div>
	</el-dialog>
</template>
<script>
import dayjs from 'dayjs'
import MemberBillDetail from '@/components/Funds/SettlementBillDetail/MemberBillDetail'
import ProxyBillDetail from '@/components/Funds/SettlementBillDetail/ProxyBillDetail'
export default {
	components: { MemberBillDetail, ProxyBillDetail },
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			detailKey: 0,
			loading: false,
			currentBillDetail: {},
			lastBillDetail: {}
		}
	},
	created() {
		this.getSettlementBillData()
	},
	methods: {
		getSettlementBillData() {
			this.currentBillDetail = {}
			this.lastBillDetail = {}
			this.loading = true
			const params = {
				billNo: this.detailData.billNo,
				isCompareLastBill: true
			}
			this.$api
				.getReportSettlementBillDetail(params)
				.then((res) => {
					this.currentBillDetail = res?.data?.currentBill || {}
					this.lastBillDetail = res?.data?.lastBill || {}

					this.currentBillDetail.reportStDate = dayjs(
						String(this.currentBillDetail.reportStDate)
					).format('YYYY-MM-DD 00:00:00')
					this.currentBillDetail.reportEnDate = dayjs(
						String(this.currentBillDetail.reportEnDate)
					).format('YYYY-MM-DD 23:59:59')

					// this.currentBillDetail.reportStDate = dayjs(
					// 	this.currentBillDetail.reportStDateStr
					// 		.replace('时', '')
					// 		.replace(/\./g, '-')
					// ).format('YYYY-MM-DD HH:mm:ss')
					// this.currentBillDetail.reportEnDate = dayjs(
					// 	this.currentBillDetail.reportEdDateStr
					// 		.replace('时', '')
					// 		.replace(/\./g, '-')
					// ).format('YYYY-MM-DD HH:mm:ss')
					this.detailKey = Math.random()
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	background-color: #333333;
	color: #ffffff;
	font-weight: 700;
	padding: 10px 20px 10px;
}

::v-deep .el-dialog__headerbtn {
	font-size: 24px;
	top: 10px;
	right: 10px;
}
::v-deep .el-dialog__close {
	color: #ffffff;
}
::v-deep .el-icon-question:after {
	font-size: 18px;
	margin-left: -4px;
}
.date-title {
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 10px;
	color: #363636;
}
</style>
<style lang="scss">
.bill-detail-content {
	.item-show {
		width: 100%;
		min-height: 80px;
		margin-right: 10px;
		margin-bottom: 20px;
		border-color: #bebebe;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
		.item-title {
			color: #6a6a6a;
			font-size: 18px;
			font-weight: 900;
			margin-left: 10px;
			margin-top: 10px;
		}
		.item-content {
			margin-left: 10px;
			margin-top: 5px;
			margin-bottom: 5px;
			i {
				cursor: pointer;
			}
			span {
				line-height: 3;
			}
			.item-row-content {
				word-wrap: break-word;
				.item-row-five {
					min-width: 19%;
					display: inline-block;
				}
				.item-row-six {
					min-width: 16%;
					display: inline-block;
				}
			}
			.show-money {
				font-size: 15px;
				padding-left: 5px;
				color: black;
			}
			.show-money-url {
				font-size: 14px;
				color: black;
			}
		}
	}
}
</style>
